{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>消息处理</title>
    <meta name="description" content="Responsive, Bootstrap, BS4">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
    <link rel="apple-touch-icon" href="{% static '' %}aside/images/logo.png">
    <meta name="apple-mobile-web-app-title" content="Flatkit">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" sizes="196x196" href="{% static '' %}aside/images/logo.png">
    <link rel="stylesheet" href="{% static '' %}aside/css/animate.css/animate.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/glyphicons/glyphicons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/font-awesome/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/material-design-icons/material-design-icons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/ionicons/css/ionicons.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/simple-line-icons/css/simple-line-icons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/bootstrap/dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/styles/app.min.css">
    <link rel="stylesheet" href="{% static '' %}aside/css/styles/font.css" type="text/css">

</head>
<body>
<div class="app" id="app">
<div id="aside" class="app-aside fade nav-dropdown black">
    <div class="navside dk" data-layout="column">
        <div class="navbar no-radius"><a href="/" class="navbar-brand">
            <div data-ui-include="'{% static '' %}aside/images/logo.svg'"></div>
            <img src="{% static '' %}aside/images/logo.png" alt="." class="hide"> <span class="hidden-folded inline">WanFeng</span></a></div>
        <div data-flex class="hide-scroll">
            <nav class="scroll nav-stacked nav-stacked-rounded nav-color">
                <ul class="nav" data-ui-nav>

                    <li class="nav-header hidden-folded m-t"><span class="text-xs">消息处理</span></li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-plus-circled"></i></span> <span class="nav-text">订单消息</span></a>
                        <ul class="nav-sub nav-mega nav-mega-3">
                            <li><a href="#"><span class="nav-text">纠纷订单</span></a></li>
                            <li><a href="#"><span class="nav-text">重点关注</span></a></li>

                        </ul>
                    </li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-ios-photos"></i></span> <span class="nav-text">站内信</span></a>

                    </li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-checkmark-circled"></i></span> <span class="nav-text">消息模板</span></a>

                    </li>

                    <li class="nav-header hidden-folded"><span class="text-xs">主菜单</span></li>
                    <li><a href="#" class="b-danger"><span class="nav-icon text-white no-fade"><i class="ion-filing"></i></span> <span class="nav-text">个人中心</span></a></li>
                    <li><a href="{% url 'erp:order' %}" class="b-accent"><span class="nav-icon text-white no-fade"><i class="ion-android-apps"></i></span> <span class="nav-text">订单管理</span></a></li>
                    <li><a href="#" class="b-success"><span class="nav-icon text-white no-fade"><i class="ion-android-apps"></i></span> <span class="nav-text">产品管理</span></a></li>
                    <li><a href="{% url 'erp:message' %}" class="b-info"><span class="nav-label"><b class="label label-xs rounded danger"></b></span> <span class="nav-icon"><i class="ion-chatbubble-working"></i></span> <span class="nav-text">消息处理</span></a></li>
                    <li><a href="#" class="b-default"><span class="nav-icon"><i class="ion-person"></i></span> <span class="nav-text">客户管理</span></a></li>
                </ul>
            </nav>
        </div>
        <div data-flex-no-shrink>
            <div class="nav-fold dropup"><a data-toggle="dropdown">
                <div class="pull-left">
                    <div class="inline"><span class="avatar w-40 grey">JR</span></div>
                    <img src="{% static '' %}aside/images/a0.jpg" alt="..." class="w-40 img-circle hide"></div>
                <div class="clear hidden-folded p-x"><span class="block _500 text-muted">Jean Reyes</span>
                    <div class="progress-xxs m-y-sm lt progress">
                        <div class="progress-bar info" style="width: 15%"></div>
                    </div>
                </div>
            </a>
                <div class="dropdown-menu w dropdown-menu-scale"><a class="dropdown-item" href="#"><span>个人资料</span></a> <a class="dropdown-item" href="#"><span>设置</span></a> <a class="dropdown-item" href="#"><span>收件箱</span></a> <a class="dropdown-item" href="#"><span>消息处理</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">帮助?</a> <a class="dropdown-item" href="#">退出</a></div>
            </div>
        </div>
    </div>
</div>
<div id="content" class="app-content box-shadow-z2 pjax-container" role="main">
    <div class="app-header hidden-lg-up black lt b-b">
        <div class="navbar" data-pjax><a data-toggle="modal" data-target="#aside" class="navbar-item pull-left hidden-lg-up p-r m-a-0"><i class="ion-navicon"></i></a>
            <div class="navbar-item pull-left h5" id="pageTitle">消息</div>
            <ul class="nav navbar-nav pull-right">
            <li class="nav-item dropdown pos-stc-xs"><a class="nav-link clear" data-toggle="dropdown"><i class="ion-android-notifications-none w-24"></i> <span class="label up p-a-0 danger"></span></a>
                <div class="dropdown-menu pull-right w-xl animated fadeIn no-bg no-border no-shadow">
                    <div class="scrollable" style="max-height: 220px">
                        <ul class="list-group list-group-gap m-a-0">
                            <li class="list-group-item dark-white box-shadow-z0 b"><span class="pull-left m-r"><img src="{% static '' %}aside/images/a0.jpg" alt="..." class="w-40 img-circle"></span> <span class="clear block">新增订单［<a href="#" class="text-primary">78023645468911</a>］<br>
                    <small class="text-muted">10 分钟前</small></span></li>
                            <li class="list-group-item dark-white box-shadow-z0 b"><span class="pull-left m-r"><img src="{% static '' %}aside/images/a1.jpg" alt="..." class="w-40 img-circle"></span> <span class="clear block">产品SKU［32601740388］<a href="#" class="text-primary">缺货</a><br>
                    <small class="text-muted">2 小时前</small></span></li>
                            <li class="list-group-item dark-white text-color box-shadow-z0 b"><span class="pull-left m-r"><img src="{% static '' %}aside/images/a2.jpg" alt="..." class="w-40 img-circle"></span> <span class="clear block">订单［78023645468911］ 有<a href="#" class="text-primary">留言</a><br>
                    <small class="text-muted">1 天前</small></span></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown"><a class="nav-link clear" data-toggle="dropdown"><span class="avatar w-32"><img src="{% static '' %}aside/images/a3.jpg" class="w-full rounded" alt="..."></span></a>
                <div class="dropdown-menu w dropdown-menu-scale pull-right"><a class="dropdown-item" href="#"><span>个人档案</span></a> <a class="dropdown-item" href="#"><span>设置</span></a> <a class="dropdown-item" href="#"><span>收件箱</span></a> <a class="dropdown-item" href="#"><span>消息</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">帮助?</a> <a class="dropdown-item" href="#">退出</a></div>
            </li>
        </ul>
        </div>
    </div>
    <div class="app-body">
        <div class="app-body-inner">
            <div class="row-col">
                <div class="col-xs-3 w-lg modal fade aside aside-sm" id="list">
                    <div class="row-col success">
                        <div>
                            <div class="p-a">
                                <form>
                                    <div class="input-group input-group-sm p-x-sm dker rounded">
                                        <input type="text" class="form-control no-bg no-border text-white" placeholder="Search" required>
                      <span class="input-group-btn">
                      <button class="btn no-bg no-border no-shadow" type="button"><i class="fa fa-search"></i></button>
                      </span></div>
                                </form>
                            </div>
                            <div class="nav text-center p-b">
                                <a href="#" class="nav-link m-x" data-toggle="tooltip" title="站内信"><i class="ion-person-add"></i></a> <a href="#" class="nav-link m-x" data-toggle="tooltip" title="纠纷订单"><i class="ion-person-stalker"></i></a> <a href="#" class="nav-link m-x" data-toggle="tooltip" title="常规订单"><i class="ion-chatbubble"></i></a> <a href="#" class="nav-link m-x" data-toggle="tooltip" title="Location"><i class="ion-location"></i></a> <a href="#" class="nav-link m-x" data-toggle="tooltip" title="Plugins"><i class="ion-grid"></i></a></div>
                        </div>
                        <div class="row-row">
                            <div class="row-body scrollable hover">
                                <div class="row-inner">
                                    <div class="list inset" data-ui-list="active" id="m-list">
                                        <div class="p-x text-dark m-t m-b-sm text-sm">Messages</div>
                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle indigo"><i class="on b-white avatar-right"></i> <img src="{% static '' %}aside/images/a6.jpg" alt="."></span></div>
                                            <div class="list-body"><span class="pull-right text-xs label rounded lt">8</span>
                                                <div class="item-title"><a href="#" class="_500">Fifth Harmony</a></div>
                                                <small class="block text-muted text-ellipsis">Send you a invitation to SWO</small></div>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle light-blue"><i class="off b-white avatar-right"></i> <img src="{% static '' %}aside/images/a1.jpg" alt="."></span></div>
                                            <div class="list-body"><span class="pull-right text-xs label rounded lt">30</span>
                                                <div class="item-title"><a href="#" class="_500">Kygo</a></div>
                                                <small class="block text-muted text-ellipsis">What&#x27;s the project progress now</small></div>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle teal"><i class="on b-white avatar-right"></i> <img src="{% static '' %}aside/images/a7.jpg" alt="."></span></div>
                                            <div class="list-body">
                                                <div class="item-title"><a href="#" class="_500">RYD</a></div>
                                                <small class="block text-muted text-ellipsis">Added you to repo</small></div>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle blue"><i class="on b-white avatar-right"></i> <img src="{% static '' %}aside/images/a9.jpg" alt="."></span></div>
                                            <div class="list-body">
                                                <div class="item-title"><a href="#" class="_500">Postiljonen</a></div>
                                                <small class="block text-muted text-ellipsis">Looking for some client-work</small></div>
                                        </div>
                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle grey"><i class="on b-white avatar-right"></i> <img src="{% static '' %}aside/images/a0.jpg" alt="."></span></div>
                                            <div class="list-body">
                                                <div class="item-title"><a href="#" class="_500">Summerella</a></div>
                                                <small class="block text-muted text-ellipsis">Send you a message</small></div>
                                        </div>
                                        <div class="p-x text-dark m-t m-b-sm text-sm">Groups</div>
                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle"><span class="w-40 avatar lter">WG</span></span></div>
                                            <div class="list-body"><a href="#" class="_500">Work group</a> <small class="block text-muted text-ellipsis">32 persons</small></div>
                                        </div>
                                    </div>
                                    <div class="list inset grey" id="quickReplay" style="display: none;">
                                        <div class="p-x text-white m-t p-t-1 m-b-sm text-sm"><h6>公共模板</h6></div>

                                        <div class="form-group">
                                            <div class="input-group select2-bootstrap-prepend"><span class="input-group-btn">
                <button class="btn btn-default" type="button" data-select2-open="single-prepend-text"><span class="fa fa-search"></span></button>
                </span>
                                                <select id="single-prepend-text" class="form-control select2" data-ui-jp="select2" data-ui-options="{theme: 'bootstrap'}">
                                                    <option value="A">A</option>
                                                    <option value="B">B</option>
                                                    <option value="C">C</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle indigo"><i class="on b-white avatar-right"></i> <img src="{% static '' %}aside/images/a6.jpg" alt="."></span></div>
                                            <div class="list-body"><span class="pull-right text-xs label rounded lt">8</span>
                                                <div class="item-title"><a href="#" class="_500">Fifth Harmony</a></div>
                                                <small class="block text-muted text-ellipsis">Send you a invitation to SWO</small></div>
                                        </div>


                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle grey"><i class="on b-white avatar-right"></i> <img src="{% static '' %}aside/images/a0.jpg" alt="."></span></div>
                                            <div class="list-body">
                                                <div class="item-title"><a href="#" class="_500">Summerella</a></div>
                                                <small class="block text-muted text-ellipsis">Send you a message</small></div>
                                        </div>
                                        <div class="p-x text-white m-t m-b-sm text-sm p-t-1"><h6>自定义模板</h6></div>
                                        <div class="form-group">
                                            <div class="input-group select2-bootstrap-prepend"><span class="input-group-btn">
                                            <button class="btn btn-default" type="button" data-select2-open="single-prepend-text"><span class="fa fa-search"></span></button>
                                            </span>
                                                                            <select id="single-prepend-text" class="form-control select2" data-ui-jp="select2" data-ui-options="{theme: 'bootstrap'}">
                                                                                <option value="A">A</option>
                                                                                <option value="B">B</option>
                                                                                <option value="C">C</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                        <div class="list-item">
                                            <div class="list-left"><span class="w-40 avatar circle"><span class="w-40 avatar lter">WG</span></span></div>
                                            <div class="list-body"><a href="#" class="_500">Work group</a> <small class="block text-muted text-ellipsis">32 persons</small></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-x-md p-y"><a id="showQuick" class="pull-right btn btn-xs rounded dk"><i class="fa fa-plus"></i></a> <span class="text-sm text-muted">Messages: 90+</span></div>
                    </div>
                </div>
                <div class="col-xs-6" id="detail">
                    <div class="row-col dark-light">
                        <div class="dark-white b-b">
                            <div class="navbar">
                                <ul class="nav navbar-nav pull-right m-l">
                                    <li class="nav-item"><a class="nav-link" data-toggle="tooltip" data-placement="bottom" title="显示英文"><span class="btn btn-sm btn-icon rounded success" id="show-en">En</span></a></li>
                                    <li class="nav-item"><a class="nav-link" data-toggle="tooltip" data-placement="bottom" title="标记为已读"><span class="btn btn-sm btn-icon rounded success" id="mark-read"><i class="fa fa-pencil"></i></span></a></li>
                                </ul>
                                <a data-toggle="modal" data-target="#profile" data-ui-modal class="m-r-0 m-l navbar-item pull-right hidden-lg-up"><span class="btn btn-sm btn-icon rounded success"><i class="fa fa-file-text"></i></span></a> <a data-toggle="modal" data-target="#list" data-ui-modal class="navbar-item pull-left hidden-md-up"><span class="btn btn-sm btn-icon success"><i class="fa fa-list"></i></span></a> <span class="navbar-item text-md text-ellipsis">Paulius Martinaitis</span></div>
                        </div>
                        <div class="row-row">
                            <div class="row-body">
                                <div class="row-inner">
                                    <div class="p-a-md">
                                        <div class="m-b"><a href="#" class="pull-left w-40 m-r-sm"><img src="{% static '' %}aside/images/a2.jpg" alt="." class="w-full img-circle"></a>
                                            <div class="clear">
                                                <div>
                                                    <div class="p-a p-y-sm success inline rounded msg-en" style="display: none;">Hello, when could I expect my order will be shipped?</div>
                                                </div>
                                                <div class="m-t-xs">
                                                    <div class="p-a p-y-sm success inline rounded">你好，我什么时候能预料到我的订单会被运到？</div>
                                                </div>
                                                <div class="text-muted text-xs m-t-xs"><i class="fa fa-ok text-success"></i> 2016-11-18 3:19:13</div>
                                            </div>
                                        </div>
                                        <div class="m-b"><a href="#" class="pull-right w-40 m-l-sm"><img src="{% static '' %}aside/images/a0.jpg" class="w-full img-circle" alt="."></a>
                                            <div class="clear text-right">
                                                <div class="p-a p-y-sm dark-white inline rounded text-left msg-en" style="display: none;">Hello, arrived in your country needs 15-30 days, the average amount of time is 22 days, thank you very much for your order, Nice day！</div>
                                                <div class="m-t-xs">
                                                    <div class="p-a p-y-sm dark-white inline rounded text-left">你好，来到你的国家需要15-30天，平均时间是22天，谢谢你的订单，很好的一天！</div>
                                                </div>
                                                <div class="text-muted text-xs m-t-xs">2016-11-18 11:38:05</div>
                                            </div>
                                        </div>
                                        <div class="m-b"><a href="#" class="pull-left w-40 m-r-sm"><img src="{% static '' %}aside/images/a2.jpg" alt="." class="w-full img-circle"></a>
                                            <div class="clear">
                                                <div class="p-a p-y-sm success inline rounded msg-en" style="display: none;">that's ok. but have you already shipped? is there a tracking number?</div>
                                                <div class="m-t-xs">
                                                    <div class="p-a p-y-sm success inline rounded">没关系.但是你已经发货了吗？有一个跟踪号码吗?</div>
                                                </div>
                                                <div class="text-muted text-xs m-t-xs"><i class="fa fa-ok text-success"></i> 2016-11-18 14:59:04</div>
                                            </div>
                                        </div>
                                        <div class="m-b"><a href="#" class="pull-left w-40 m-r-sm"><img src="{% static '' %}aside/images/a2.jpg" alt="." class="w-full img-circle"></a>
                                            <div class="clear">
                                                <div class="p-a p-y-sm success inline rounded msg-en" style="display: none;">Hello, when the order will be shipped?</div>
                                                <div class="m-t-xs">
                                                    <div class="p-a p-y-sm success inline rounded">你好，什么时候出货?</div>
                                                </div>
                                                <div class="text-muted text-xs m-t-xs"><i class="fa fa-ok text-success"></i> 2016-11-20 3:51:44</div>
                                            </div>
                                        </div>
                                        <div class="m-b"><a href="#" class="pull-left w-40 m-r-sm"><img src="{% static '' %}aside/images/a2.jpg" alt="." class="w-full img-circle"></a>
                                            <div class="clear">
                                                <div>
                                                    <div class="p-a p-y-sm success inline rounded text-left msg-en" style="display: none;"> I ordered on Nov. 16. When it will be shiped?</div>
                                                </div>
                                                <div class="m-t-xs">
                                                    <div class="p-a p-y-sm success inline rounded">我订购的11月16日。当它将装货？</div>
                                                </div>
                                                <div class="text-muted text-xs m-t-xs"><i class="fa fa-ok text-success"></i> 2016-11-21 2:44:58</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-a b-t dark-white">
                            <form>
                                <div class="input-group">
                                    <textarea class="form-control" placeholder="Say something"></textarea>
                    <span class="input-group-btn">
                    <button class="btn white b-a no-shadow" type="button"><i class="fa fa-send text-success"></i></button>
                    <button class="btn white b-a no-shadow" type="button"><i class="fa fa-send text-success"></i></button>
                    </span></div>
                            </form>



                        </div>
                    </div>
                </div>
                <div class="col-xs-3 w-md modal fade aside aside-md aside-md-right" id="profile">
                    <div class="row-col dark-white b-l">
                        <div class="row-row">
                            <div class="row-body scrollable hover">
                                <div class="row-inner">
                                    <div class="p-a-lg"><img src="http://ae01.alicdn.com/kf/HTB1Gv3tLXXXXXbFXVXXq6xXFXXXE.jpg" class="w-full" alt="."> <span class="text-md m-t block"></span>
                                        <small class="text-muted">售价：<code>13.88</code></small><br/>
                                        <small class="text-muted">国家：<code>立陶宛</code></small><br/>
                                        <small class="text-muted">日期：<code>2016-11-16</code></small><br/>
                                        <small class="text-muted">物流：<code>LM121515790CN</code></small><br/>
                                        <div class="block clearfix m-t">
                                            <a href="#" class="btn btn-icon btn-social rounded btn-sm" data-toggle="tooltip" data-placement="bottom" title="延长发货时间"><i class="fa fa-comment grey"></i> <i class="fa fa-comment indigo"></i></a>
                                            <a href="#" class="btn btn-icon btn-social rounded btn-sm" data-toggle="tooltip" data-placement="bottom" title="暂时搁置"><i class="fa fa-heart grey"></i> <i class="fa fa-heart light-blue"></i></a>
                                            <a href="#" class="btn btn-icon btn-social rounded btn-sm" data-toggle="tooltip" data-placement="bottom" title="重新发包裹"><i class="fa fa-paperclip grey"></i> <i class="fa fa-paperclip red"></i></a>
                                            <a href="#" class="btn btn-icon btn-social rounded btn-sm" data-toggle="tooltip" data-placement="bottom" title="延长发货时间"><i class="fa fa-lock grey"></i> <i class="fa fa-lock cyan-600"></i></a>
                                        </div>
                                    </div>
                                    <div class="p-a-md">
                                        <ul class="nav">
                                            <li class="nav-item m-b-xs"><a class="nav-link text-muted block"><span class="pull-right text-sm"><i class="fa fa-fw fa-map-marker"></i></span> <span>London</span></a></li>
                                            <li class="nav-item m-b-xs"><a class="nav-link text-muted block"><span class="pull-right text-sm"><i class="fa fa-fw fa-phone"></i></span> <span>123-456-789</span></a></li>
                                            <li class="nav-item m-b-xs"><a class="nav-link text-muted block"><span class="pull-right text-sm"><i class="fa fa-fw fa-birthday-cake"></i></span> <span>July 03</span></a></li>
                                            <li class="nav-item m-b-xs"><a class="nav-link text-muted block"><span class="pull-right text-sm"><i class="fa fa-fw fa-envelope"></i></span> <span>Nouvelle@gmail.com</span></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
<div id="switcher">
    <div class="switcher dark-white" id="sw-theme"><a href="#" data-ui-toggle-class="active" data-ui-target="#sw-theme" class="dark-white sw-btn"><i class="fa fa-gear text-muted"></i></a>
        <div class="box-header"><a href="{% url 'buy' %}" class="btn btn-xs rounded danger pull-right">BUY</a> <strong>主题设置</strong></div>
        <div class="box-divider"></div>
        <div class="box-body">
            <p id="settingLayout" class="hidden-md-down">
                <label class="md-check m-y-xs" data-target="folded">
                    <input type="checkbox">
                    <i></i> <span>收起侧栏</span></label><br/>
                <label class="m-y-xs pointer" data-ui-fullscreen data-target="fullscreen"><span class="fa fa-expand fa-fw m-r-xs"></span> <span>全屏显示</span></label>
            </p>
            <p>Colors:</p>
            <p data-target="color">
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="primary">
                    <i class="primary"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="accent">
                    <i class="accent"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="warn">
                    <i class="warn"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="success">
                    <i class="success"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="info">
                    <i class="info"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="warning">
                    <i class="warning"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="danger">
                    <i class="danger"></i></label>
            </p>
            <p>Themes:</p>
            <div data-target="bg" class="clearfix">
                <label class="radio radio-inline m-a-0 ui-check ui-check-lg">
                    <input type="radio" name="theme" value="">
                    <i class="light"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-lg">
                    <input type="radio" name="theme" value="grey">
                    <i class="grey"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-lg">
                    <input type="radio" name="theme" value="dark">
                    <i class="dark"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-lg">
                    <input type="radio" name="theme" value="black">
                    <i class="black"></i></label>
            </div>
        </div>
    </div>
</div>
</div>
<script src="{% static '' %}aside/scripts/app.js"></script>
</body>
</html>